@function rem($n) {
    @return (($n * 1rem) / 75); // 设计稿的宽度像素值750, 要除以10  75=750(设计稿)/10(rem.js里的10)
}

/*基础颜色*/
$color:#46aaff;
/*布局*/
.h-row::after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.h-row {
    zoom: 1;
    text-align: center;
}

.h-col {
    float: left;
    box-sizing: border-box;
}

.h-col-1 {
    width: 100%/24*1;
}

.h-col-2 {
    width: 100%/24*2;
}

.h-col-3 {
    width: 100%/24*3;
}

.h-col-4 {
    width: 100%/24*4;
}

.h-col-5 {
    width: 100%/24*5;
}

.h-col-6 {
    width: 100%/24*6;
}

.h-col-7 {
    width: 100%/24*7;
}

.h-col-8 {
    width: 100%/24*8;
}

.h-col-9 {
    width: 100%/24*9;
}

.h-col-10 {
    width: 100%/24*10;
}

.h-col-11 {
    width: 100%/24*11;
}

.h-col-12 {
    width: 50%;
}

.h-col-13 {
    width: 100%/24*13;
}

.h-col-14 {
    width: 100%/24*14;
}

.h-col-15 {
    width: 100%/24*15;
}

.h-col-16 {
    width: 100%/24*16;
}

.h-col-17 {
    width: 100%/24*17;
}

.h-col-18 {
    width: 100%/24*18;
}

.h-col-19 {
    width: 100%/24*19;
}

.h-col-20 {
    width: 100%/24*20;
}

.h-col-21 {
    width: 100%/24*21;
}

.h-col-22 {
    width: 100%/24*22;
}

.h-col-23 {
    width: 100%/24*23;
}

.h-col-24 {
    width: 100%;
}

/*全局布局*/
.has-header {
    padding-top:rem(88); 
    /* padding-top: 46px; */
}
.has-footer {
    padding-bottom: rem(100);
}

/*圆角*/

@mixin border-radius($radius...) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

/*阴影*/

@mixin box-shadow($shadows...) {
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}

/*文字阴影*/

@mixin text-shadow($shadows...) {
    text-shadow: $shadows;
}

/*线性渐变*/

@mixin linear-gradient($val...) {
    background: -webkit-linear-gradient($val);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient($val);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient($val);
    /* Firefox 3.6 - 15 */
    background: linear-gradient($val);
    /* 标准的语法 */
}

/*垂直居中*/

@mixin vertical-center() {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/*去除padding 宽度*/

@mixin box-sizing-border() {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
}

/*css3盒子
 * flex-direction: row  row-reverse column  column-reverse
 * flex-wrap: nowrap wrap wrap-reverse
 * justify-content: flex-start flex-end center space-between space-around
 * align-items: stretch flex-start flex-end center beseline
 * align-content: stretch flex-start flex-end center space-between space-around
 * */

@mixin display-flex() {
    display: -webkit-flex;
    display: flex;
}

@mixin flex-direction($value) {
    @include display-flex();
    -webkit-flex-direction: $value;
    flex-direction: $value;
}

@mixin flex-wrap($value) {
    @include display-flex();
    -webkit-flex-wrap: $value;
    flex-wrap: $value;
}

@mixin justify-content($value) {
    @include display-flex();
    -webkit-justify-content: $value;
    justify-content: $value;
}

@mixin align-items($value) {
    @include display-flex();
    -webkit-align-items: $value;
    align-items: $value;
}

@mixin align-content($value) {
    @include display-flex();
    -webkit-align-content: $value;
    align-content: $value;
}

/*设置flex*/

@mixin flex-num($num) {
    -webkit-box-flex: $num;
    -ms-flex: $num;
    flex: $num;
}

/*一行截取*/

@mixin ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*多行截取*/

@mixin ellipsis-clamp($num) {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: $num;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

/*旋转角度，x,y位移*/

@mixin rotate-origin($num, $x, $y) {
    transform: rotate($num);
    transform-origin: $x $y;
    -ms-transform: rotate($num);
    /* IE 9 */
    -ms-transform-origin: $x $y;
    /* IE 9 */
    -webkit-transform: rotate($num);
    /* Safari and Chrome */
    -webkit-transform-origin: $x $y;
    /* Safari and Chrome */
}

/*旋转*/

@mixin transform-rotate($deg) {
    transform: rotate($deg);
    -ms-transform: rotate($deg);
    /* IE 9 */
    -webkit-transform: rotate($deg);
    /* Safari and Chrome */
}

/*过度*/

@mixin transition($val...) {
    transition: $val;
    -webkit-transition: $val;
    /* Safari */
}